<template>
  <div>
    <van-nav-bar title="锦州自助洗车" left-text="首页" right-text="退出" @click-left="onClickLeft" @click-right="onClickRight"/>
    <van-form @submit="onSubmit">
       <van-field
        v-model="infoObj.usrSerialNo"
        name="车主编号"
        label="车主编号"
        readonly
        placeholder="车主编号"
        input-align="right"
      />
      <van-field
        v-model="infoObj.mobile"
        name="手机号"
        label="车主手机号"
        readonly
        placeholder="手机号"
        input-align="right"
      />
      <van-field
        v-model="infoObj.pswd"
        name="密码"
        label="密码"
        placeholder=""
        readonly
        input-align="right"
      />
      <van-field v-for="(item,index) in infoObj.accountCarPlateInfoDTOS" :key="index"
        v-model="item.carPlateNo"
        name=""
        :label="index > 0 ? '' : '车牌号码'"
        placeholder=""
        input-align="right"
      />
      <van-field
        v-model="infoObj.name"
        name="姓名"
        label="车主姓名"
        placeholder="姓名"
        readonly
        input-align="right"
      />
      <van-field
        class="money"
        v-model="infoObj.balance"
        name="当前余额"
        label="当前余额"
        readonly
        placeholder="当前余额"
        input-align="right"
      />
      <div style="margin: 16px;">
        <van-row gutter="20">
          <van-col span="12">
            <van-button block type="info" native-type="submit" @click="moneyLink">马上充值</van-button>
          </van-col>
          <van-col span="12">
            <van-button block type="info" native-type="submit" @click="addCar">添加车牌</van-button>
          </van-col>
        </van-row>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data(){
    return{
      username: '',
      password: '',
      value: '',
      columns: ['50', '80', '100', '200'],
      showPicker: false,
      sms: '',
      infoObj:{}
    }
  },
  mounted(){
    this.getInfor()
  },
  methods:{
    // 获取用户信息
    getInfor(){
      this.$api.inforApi().then(resp=>{
        if(resp.code == 0){
          this.infoObj = resp.accountInfo
        }else{
          this.$toast(resp.msg)
        }
      })
    },
    // 马上充值
    moneyLink(){
      this.$router.push({
        name:'online'
      })
    },
    // 添加车牌
    addCar(){
      this.$router.push({
        name:'carNumber'
      })
    },
    onSubmit(){},
    onClickLeft() {
      this.$router.push({
        name:'index'
      })
    },
    onClickRight() {
      if(localStorage.getItem('token')){
        this.$api.logout().then(resp=>{
          if(resp.code == 0){
            localStorage.removeItem('openId')
            localStorage.removeItem('token')
            this.$router.push({
              name:'login'
            })
          }
        })
      }else{
        this.$router.push({
          name:'login'
        })
      }
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  }
}
</script>
<style>
.money .van-field__control{
  color: red;
}
</style>
